<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <script src="./JavaScript/jquery-3.7.1.js"></script>
  <style>
    .box1{
        height: 200px;
        width: 200px;
        background-color: aqua;
    }
    .box2{
        height: 100px;
        width: 100px;
        background-color: chartreuse;
    }
  </style>
  <script>
    $(function () {
      /*
                    append()
                        - 向父元素后边添加一个子元素
                    appendTo()
                        - 将子元素添加到父元素后边
                    prepend()
                    prependTo()
                        - 向父元素的前边添加子元素
                    text()
                        - 获取/设置元素的文本内容
                    html()
                        - 获取/设置元素的html代码
        */

      $('#btn01').click(function () {
        // $('.box1').append('<div class = "box2"/>');
        // $("<div class='box2'/>").appendTo(".box1")
        $(".box1").prepend("<div class='box2'/>")
        var $boxtext = $(".box1").text("DD")
        console.log($boxtext);
         $boxtext = $(".box1").html("<div/>GG")
      });
    });
  </script>
  <body>
    <button id="btn01">1</button>
    <hr>
    <div class="box1">1

    </div>
    </ul>
  </body>
</html>
